<template>
  <div class="container">
    <div class="export-header">
      <el-button
        icon="el-icon-download"
        type="primary"
        size='medium'
        @click="exportClick"
      >批量导出</el-button>
    </div>
    <div class="input_modal">
      <div class="input-item">
        <span>昵称：</span>
        <el-input
          v-model="nickname"
          placeholder="请输入内容"
          class="proName"
          @keyup.enter.native="search"
        ></el-input>
      </div>
      <div class="input-item">
        <span>手机：</span>
        <el-input
          v-model="mobile"
          placeholder="请输入内容"
          class="proName"
          @keyup.enter.native="search"
        ></el-input>
        <el-button
          icon="el-icon-search"
          type="primary"
          size="medium"
          @click="getList"
        >查询</el-button>
      </div>
    </div>
    <div class="table_con">
      <el-table
        @selection-change="handleSelectionChange"
        v-loading="loading"
        :data="tableData"
        :border='true'
      >
        <el-table-column
          fixed="left"
          type="selection"
          min-width='100'
          align="center"
        >
        </el-table-column>
        <el-table-column
          :formatter="formatter"
          prop="avatarUrl "
          label="头像"
        >
          <template slot-scope="scope">
            <div
              class="avatar"
              v-if='scope.row.avatarUrl '
            ><img
                :src="scope.row.avatarUrl "
                alt=""
              ></div>
            <div
              class="avatar"
              v-else
            ><img
                src="../../images/default.png"
                alt=""
              ></div>
          </template>
        </el-table-column>
        <el-table-column
          :formatter="formatter"
          prop="nickname"
          label="昵称"
        ></el-table-column>
        <el-table-column
          :formatter="formatter"
          prop="mobile"
          label="手机号"
        ></el-table-column>
        <el-table-column
          :formatter="formatter"
          prop="realname"
          label="姓名"
        ></el-table-column>
        <el-table-column
          :formatter="formatter"
          prop="company"
          label="公司名称"
        ></el-table-column>
        <el-table-column
          :formatter="formatter"
          prop="point "
          label="积分"
        >
          <template slot-scope="scope">
            <span v-if="!scope.row.state">{{scope.row.point}}</span>
            <el-input
              style="width:120px"
              v-model="param.point"
              v-if="scope.row.state"
              placeholder="请输入"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column
          prop=""
          label="操作"
          width='120'
        >
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              @click="editPoint(scope.row.id,scope.row.state)"
            >{{scope.row.state?'保存':'编辑积分'}}</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="pageIndex"
        :page-size="pageSize"
        :page-sizes='[10,20,30,40]'
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageCount"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
let CONSTANT = require("../../constant/constant.js");
let common = require("../../common.js");
export default {
  data() {
    return {
      dialogVisible:true,
      tableData: [],
      pageCount: null,
      pageIndex: 1,
      pageSize: 10,
      loading: true,
      mobile: null,
      nickname: null,
      param: {
        point: "",
        userId: ""
      },
      ids:[]
    };
  },
  mounted() {
    this.pageIndex = this.$router.currentRoute.query.pageIndex
      ? this.$router.currentRoute.query.pageIndex
      : 1;
    this.getList();
  },
  methods: {
    handleSelectionChange(rows){
      rows.map(item=>{
        this.ids.push(item.id)
      })
    },
    exportClick() {
      let sessionId = sessionStorage.getItem("sessionId");
      let url = `${CONSTANT.URL.LIST.useExport}?sessionId=${sessionId}`;
      let data = {
        nickname: this.nickname,
        mobile: this.mobile,
        ids:this.ids
      };
      for (let item in data) {
        if (!data[item] && data[item] !== false) {
          delete data[item];
        }
      }
      for (let item in data) {
        url = url + "&" + item + "=" + data[item];
      }
      location.href = url;
    },
    formatter(row, column, cellValue) {
      return cellValue ? cellValue : "- -";
    },
    getList: function() {
      let url = CONSTANT.URL.LIST.userPage;
      let data = {
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
        nickname: this.nickname,
        mobile: this.mobile
      };
      this.loading = true;
      common.requestAjax(url, JSON.stringify(data), null, res => {
        this.loading = false;
        let data = res.data;
        data.bussData.forEach(item => {
          item.state = false;
        });
        this.tableData = data.bussData;
        this.pageCount = data.count;
      });
    },
    savePoint() {
      this.param.point = Number(this.param.point);
      let url = CONSTANT.URL.LIST.pointUpdate;
      common.requestAjax(url, JSON.stringify(this.param), null, res => {
        this.getList();
        this.param = {
          point: "",
          userId: ""
        };
      });
    },
    editPoint(id, state) {
      this.param.userId = id;
      if (state) {
        this.savePoint();
        return;
      }
      this.tableData.forEach((item, index) => {
        if (item.id == id) {
          this.$set(this.tableData[index], "state", true);
        }
      });
      console.log(this.tableData);
    },
    search: function(e) {
      if (e.keyCode == 13) {
        this.pageIndex = 1;
        this.getList();
      }
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.pageIndex = val;
      this.getList();
    }
  }
};
</script>
